<script>
import {getAppointmentTimeList, selectAppointmentSchedulerDetailInfos} from "@/api/appointmentScheduler";

export default {
  name: "SchedulerDetailInfos",
  data() {
    return {
      departmentId: null,
      workDate: null,
      dialogVisible: false,
      item: {doctor: {user: {}, department: {}}},
      weekDay: null,
      appointmentTimeList: [],
      morningAppointmentSchedulerDetailInfos: [],
      afternoonAppointmentSchedulerDetailInfos: [],
    }
  },
  created() {
    this.departmentId = this.$route.query.departmentId;
    this.workDate = this.$route.query.workDate;
    this.selectAppointmentSchedulerDetailInfos();
  },
  methods: {
    selectAppointmentSchedulerDetailInfos() {
      let params = {
        departmentId: this.departmentId,
        workDate: this.workDate
      };
      selectAppointmentSchedulerDetailInfos(params).then(res => {
        this.morningAppointmentSchedulerDetailInfos = res.data.morningAppointmentSchedulerDetailInfos;
        this.afternoonAppointmentSchedulerDetailInfos = res.data.afternoonAppointmentSchedulerDetailInfos;
        console.log(this.morningAppointmentSchedulerDetailInfos);
        console.log(this.afternoonAppointmentSchedulerDetailInfos);
      })
    },
    reserve(item) {
      this.item = item;
      getAppointmentTimeList(item.id).then(res => {
        if (res.code === 200) {
          this.appointmentTimeList = res.data;
          console.log(this.appointmentTimeList)
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            center: true
          });
        }
      })
      this.weekDay = this.getWeekDay(item.workDate);
      this.dialogVisible = true;
    },
    selectTime(item) {
      if (item.status != '1') {
        this.$message({
          message: '该时间段不可预约',
          type: 'error',
          center: true
        });
        return;
      }
      let query = {
        appointmentItem: this.item,
        appointmentTimeItem: item
      };
      this.$router.push({
        path: '/front/registrationConfirmation',
        query: {appointmentInfo: encodeURIComponent(JSON.stringify(query))}
      });
    },
    inquiry(user){
      this.$router.push({
        path:'/front/onlineInquiry',
        query:{selectedDoctor:encodeURIComponent(JSON.stringify(user))}
      });
    },
    getWeekDay(date) {
      let weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      return weekDays[new Date(date).getDay()];
    }
  }
}
</script>

<template>
  <el-scrollbar style="height: 80vh;" :native=false wrapStyle="overflow-x:hidden;" wrapClass="" viewClass=""
                viewStyle="" :noresize=false tag="section">
    <div style="padding: 15px 20px">
      <el-divider content-position="left" v-if="morningAppointmentSchedulerDetailInfos.length!=0">上午号源</el-divider>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in morningAppointmentSchedulerDetailInfos" style="margin-bottom: 20px">
          <div style="text-align: center; background-color: #ecf8fd;padding: 10px 0px" class="card">
            <img :src="item.doctor.user.avatar" alt="" style="width: 100px; height: 100px; border-radius: 50%">
            <div style="font-weight: 550; margin-top: 10px">
              {{ item.doctor.user.userName }} <span
                style="color: #383535; margin-left: 5px; font-weight: 500">{{ item.doctor.position }}</span>
            </div>
            <div
                style="margin-top: 20px; color: #353523; padding: 0 10px; text-align: left; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;">
              专长：{{ item.doctor.characteristics }}
            </div>
            <div style="margin-top: 15px">
              挂号费：<span
                style="color: red; font-weight: 550; margin-right: 20px">￥{{ item.doctor.registrationFee }}</span>
              剩余：{{ item.availableNumber }}
            </div>
            <div style="margin-top: 5px">
              看诊地点：{{ item.location }}
            </div>
            <div style="margin-top: 15px">
              <el-button type="primary" size="mini" @click="reserve(item)" v-if="item.status=='1'">挂号</el-button>
              <el-button type="warning" size="mini" @click="" v-else-if="item.status=='0'" disabled>停约</el-button>
              <el-button type="danger" size="mini" @click="" v-else disabled>停诊</el-button>
              <el-button type="success" size="mini" @click="inquiry(item.doctor.user)">在线咨询</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-divider content-position="left" v-if="afternoonAppointmentSchedulerDetailInfos.length!=0">下午号源
      </el-divider>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in afternoonAppointmentSchedulerDetailInfos" style="margin-bottom: 20px">
          <div style="text-align: center; background-color: #ecf8fd;padding: 10px 0px" class="card">
            <img :src="item.doctor.user.avatar" alt="" style="width: 100px; height: 100px; border-radius: 50%">
            <div style="font-weight: 550; margin-top: 10px">
              {{ item.doctor.user.userName }} <span
                style="color: #383535; margin-left: 5px; font-weight: 500">{{ item.doctor.position }}</span>
            </div>
            <div
                style="margin-top: 20px; color: #353523; padding: 0 10px; text-align: left; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;">
              专长：{{ item.doctor.characteristics }}
            </div>
            <div style="margin-top: 15px">
              挂号费：<span
                style="color: red; font-weight: 550; margin-right: 20px">￥{{ item.doctor.registrationFee }}</span>
              剩余：{{ item.availableNumber }}
            </div>
            <div style="margin-top: 5px">
              看诊地点：{{ item.location }}
            </div>
            <div style="margin-top: 15px">
              <el-button type="primary" size="mini" @click="reserve(item)" v-if="item.status=='1'">挂号</el-button>
              <el-button type="warning" size="mini" @click="" v-else-if="item.status=='0'" disabled>停约</el-button>
              <el-button type="danger" size="mini" @click="" v-else disabled>停诊</el-button>
              <el-button type="success" size="mini" @click="inquiry(item.doctor.user)">在线咨询</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-dialog title="选择想挂号的时间段" :visible.sync="dialogVisible" width="50%" center>
        <div style="height:400px;margin: 0px 0px">
          <el-scrollbar style="height:100%;" :native=false wrapStyle="overflow-x:hidden;" wrapClass="" viewClass=""
                        viewStyle="" :noresize=false tag="section">
            <div class="time clearfloat">
              <i class="el-icon-time"></i>&emsp;
              <span>{{ item.workDate }}</span>&ensp;
              <span>{{ weekDay }}</span>&ensp;
              <span>{{ item.dayPart == '0' ? '上午' : '下午' }}</span>
              <div class="status fr">
                <p><span class="fk" style="background-color:#7ECCF7"></span><span>可预约</span></p>
                <p><span class="fk" style="background-color:#e4a045"></span><span>占用中</span></p>
                <p><span class="fk" style="background-color:#BFBFBF"></span><span>不可预约</span></p>
              </div>
            </div>
            <div class="time_list">
              <div class="time_item" v-for="(item,index) in appointmentTimeList" @click="selectTime(item)">
                <span class="num" v-if="item.status=='1'"   style="backgroundColor:#7ECCF7">{{ index + 1 }}</span>
                <span class="num" v-else-if="item.status=='0'" style="backgroundColor:#e4a045">{{ index + 1 }}</span>
                <span class="num" v-else style="backgroundColor:#BFBFBF">{{ index + 1 }}</span>
                <span class="time_period">{{ item.appointmentTime }}-{{ item.finishTime }}</span>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </el-dialog>
    </div>
  </el-scrollbar>
</template>

<style>
.time {
  height: 50px;
  line-height: 50px;
  background-color: #D1EFFF;
  padding: 0 20px;
  border-radius: 5px;
  font-size: 14px;
}

.time_list {
  padding: 24px;
}

.status {
  display: inline-block;
}

.fr {
  float: right;
}

.fk {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
}

.time .status p {
  display: inline-block;
  margin-left: 10px;
}

.time_item {
  float: left;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  margin-right: 20px;
  margin-bottom: 15px;
  cursor: pointer;
  border: 1px solid #BFBFBF;
}

.num {
  display: inline-block;
  width: 30px;
  text-align: center;
}

.time_item:hover .num {
  background-color: #67e388 !important;
}

.time_item .time_period {
  display: inline-block;
  background-color: #fff;
  padding: 0px 10px;
  height: 38px;
  color: #8F8D8D;
}
</style>